<template>
  <div class="tab-bar-item" @click='itemclick'>
    
   <div  v-if="!isactive" ><slot name='item-icon'></slot></div>
    <div v-else><slot name='item-icon-active'></slot></div>
    <div :style="activeStyle"><slot name='item-text'></slot></div>
    
   
    </div>
</template>

<script>
export default {
name:'TabBarItem',

props:{
  path:String,
  activeColor:{
    type:String,
    default:'red',
  }
},
methods:{
  itemclick() {
    this.$router.replace(this.path)
  }
},
computed:{
 isactive() {
   return this.$route.path.indexOf(this.path)!==-1
 },
 activeStyle(){
  return  this.isactive ? {color:this.activeColor}:{}
}
},
}


</script>
<style>

</style>
